<template>
  <div>
    <h1>房型列表</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>房型名称</td>
          <td>
            <input type="text" v-model="asd.rname" />
          </td>
          <td>状态</td>
          <td>
            <input
              type="radio"
              name="type"
              :value="1"
              v-model="asd.rtype"
            />启用
            <input
              type="radio"
              name="type"
              :value="0"
              v-model="asd.rtype"
            />禁用
          </td>
          <td>
            <input type="button" value="查询" @click="list" />
            <input type="button" value="重置" @click="cz" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>房型名称</td>
          <td>门市销售价格</td>
          <td>房间数</td>
          <td>状态</td>
          <td>房间号</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list" :key="a.rid">
          <td>{{ a.rname }}</td>
          <td>￥{{ a.rprice }}</td>
          <td>{{ a.rnum }}</td>
          <td>
            <span v-if="a.rtype == 1">启用</span>
            <span v-if="a.rtype == 0">禁用</span>
          </td>
          <td>{{ a.rstores }}</td>
          <td>
            <input type="button" value="删除" @click="del(a.rid)" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>总条数:{{ info.count }}</td>
          <td>总页数:{{ info.totalpage }}</td>
          <td>当前数:{{ asd.pageindex }}</td>
          <input
            type="button"
            value="上一页"
            @click="page(asd.pageindex - 1)"
          />
          <td v-for="a in 2">
            {{ a }}
          </td>
          <input
            type="button"
            value="下一页"
            @click="page(asd.pageindex + 1.0)"
          />
          <td>
            跳转到:<input type="text" v-model="asd.pageindex" @change="list" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted, capitalize } from "vue";
let info: any = reactive({
  count: 0,
  list: [],
  totalpage: 0,
});
let asd: any = reactive({
  rname: "",
  rtype: null,
  pageindex: 1,
  pagesize: 2,
});
onMounted(() => {
  list();
});

const cz = () => {
  asd.rname = "";
  asd.rtype = "";
};
const page = (id: any) => {
  asd.pageindex = id;
  list();
};
const del = (rid: any) => {
  let f = confirm("确认删除吗?");
  if (f) {
    axios({
      url: "/api/Room/Del",
      method: "get",
      params: {
        rid: rid,
      },
    }).then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert("删除成功");
        list();
      } else {
        alert("删除失败");
        list();
      }
    });
  }
};
const list = () => {
  axios({
    url: "/api/Room/GetList",
    method: "get",
    params: asd,
  }).then((res) => {
    console.log(res);
    Object.assign(info, res.data);
  });
};
</script>

<style scoped></style>
